<template>
	<view>
		<!--搜索框-->
		<search :tips="goodsName ? goodsName : '搜索商品'" @event="handleSearch" />
		<!--回到顶部-->
		<backTop :flag="flag"/>
		<!-- 排序标签 -->
		<view class="store-sort">
			<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')"><text>综合</text></view>
			<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')"><text>销量</text></view>
			<view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" @click="handleSortType('price')">
				<text>价格</text>
				<view class="price-arrow">
					<view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }"><text class="iconfont icon-arrow-up"></text></view>
					<view class="icon down" :class="{ active: sortType === 'price' && sortPrice }"><text class="iconfont icon-arrow-down"></text></view>
				</view>
			</view>
		</view>
		<!--商品列表-->
		<view class="goods-list clearfix column" v-if="goodsList.data.length != 0">
			<view class="goods-item" v-for="(item, index) in goodsList.data" :key="index" @click="toGoodsDetail(item.goods_id)">
				<!-- 商品图片 -->
				<view class="goods-image"><image class="image" mode="aspectFill" :src="item.goods_image"></image></view>
				<view class="detail">
					<!-- 商品标题 -->
					<view class="goods-name twoline-hide">{{ item.goods_name }}</view>
					<!-- 商品价格 -->
					<view class="detail-price oneline-hide">
						<text class="goods-price col-m">￥ {{ item.goods_price_max }}</text>
					</view>
				</view>
			</view>
			<div class="nomore" v-if="nomore">亲，没有更多啦</div>
		</view>
		<!--无商品数据-->
		<view class="nogoodsList" v-else>
			<image src="../../static/empty.png"></image>
			<p>亲，暂无相关数据</p>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
import search from '../../components/search/index.vue';
import backTop from '../../components/backTop/backTop.vue'
export default {
	data() {
		return {
			categoryId: '', //分类id
			goodsName: '', //商品名称
			sortType: 'all', // 排序类型
			sortPrice: false, // 价格排序 (true高到低 false低到高)
			page: 1,
			goodsList: {
				data: []
			}, //商品列表
			nomore: false, //下拉触底 没有更多啦
			flag:false
		};
	},
	components: {
		search,
		backTop
	},
	methods: {
		// 切换排序方式
		handleSortType(newSortType) {
			const newSortPrice = newSortType === 'price' ? !this.sortPrice : false;
			this.sortType = newSortType;
			this.sortPrice = newSortPrice;
			if (this.sortPrice === false) {
				this.sortPrice = 0;
			} else if (this.sortPrice === true) {
				this.sortPrice = 1;
			}
			this.getGoodsList();
		},

		//获取商品列表
		async getGoodsList() {
			this.page = 1;
			const data = {
				sortType: this.sortType,
				sortPrice: this.sortPrice,
				categoryId: this.categoryId,
				goodsName: this.goodsName,
				page: this.page
			};
			const result = await request('goods/list', data);
			if (result.data.list.data.length > 0) {
				// 商品列表数据
				this.goodsList = result.data.list;
			}
		},
		//获取更多商品
		async getMoreGoodsList() {
			const data = {
				sortType: this.sortType,
				sortPrice: this.sortPrice,
				categoryId: this.categoryId,
				goodsName: this.goodsName,
				page: this.page
			};
			const result = await request('goods/list', data);
			if (result.data.list.data.length > 0) {
				// 添加商品列表数据
				for (let i = 0; i < result.data.list.data.length; i++) {
					this.goodsList.data.push(result.data.list.data[i]);
				}
			}
		},

		//跳转到商品详情
		toGoodsDetail(goodsId) {
			uni.navigateTo({
				url: '/pages/goodsDetail/goodsDetail?goodsId=' + goodsId
			});
		},
		//跳转到搜索页面
		handleSearch() {
			uni.navigateTo({
				url: '/pages/indexSearch/indexSearch'
			});
		}
	},
	onLoad(option) {
		if (option.categoryId != undefined) {
			this.categoryId = option.categoryId;
		}
		if (option.goodsName != undefined) {
			this.goodsName = option.goodsName;
		}
		this.getGoodsList();
	},
	//页面触底刷新数据
	onReachBottom() {
		this.isShow = true
		if (this.page < this.goodsList.last_page) {
			this.page += 1;
			this.getMoreGoodsList();
		} else if ((this.page = this.goodsList.last_page)) {
			this.nomore = true;
		}
	},
	//监听页面滚动动态显示回到顶部组件
	onPageScroll(e) {
		//根据距离顶部距离是否显示回到顶部按钮
		if (e.scrollTop > 600) {
			//当距离大于800时显示回到顶部按钮
			this.flag = true;
		} else {
			this.flag = false;
		}
	}
};
</script>
<style scoped>
page {
	background: #fafafa;
}
</style>
<style lang="less" scoped>
//公共样式
.col-m {
	color: #fa2209 !important;
}
.clearfix::after {
	clear: both;
	content: ' ';
	display: table;
}
.oneline-hide {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.twoline-hide {
	display: -webkit-box;
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

// 排序组件
.store-sort {
	display: flex;
	padding: 20rpx 0;
	font-size: 28rpx;
	background: #fff;
	color: #000;
	z-index: 99;

	.sort-item {
		flex-basis: 33.3333%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50rpx;

		&.active {
			color: #e49a3d;
		}
	}

	.sort-item-price .price-arrow {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #000;

		.icon {
			&.active {
				color: #e49a3d;
			}

			&.up {
				margin-bottom: -16rpx;
			}

			&.down {
				margin-top: -16rpx;
			}
		}
	}
}

// 商品列表
.goods-list {
	display: flex;
	flex-wrap: wrap;
	padding: 4rpx;
}

.goods-list.column {
	.goods-item {
		width: 50%;
	}
}

.goods-item {
	box-sizing: border-box;
	padding: 6rpx;

	.goods-image {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		overflow: hidden;
		background: #fff;

		&:after {
			content: '';
			display: block;
			margin-top: 100%;
		}

		.image {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	.detail {
		padding: 8rpx;
		background: #fff;

		.goods-name {
			height: 64rpx;
			line-height: 32rpx;
			white-space: normal;
			color: #484848;
			font-size: 26rpx;
		}

		.detail-price {
			.goods-price {
				margin-right: 8rpx;
				font-size: 30rpx;
			}
		}
	}
}
//没有商品数据时
.nogoodsList {
	padding: 104rpx 52rpx 104rpx 52rpx;
	align-items: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	image {
		width: 290rpx;
		height: 188rpx;
		margin-bottom: 15rpx;
	}
	p {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: gray;
	}
}
//没有更多数据时
.nomore {
	width: 100%;
	margin: 20rpx 0;
	text-align: center;
	color: gray;
}
</style>
